<template>
  <div class="work-main">
    <!-- 内容 -->
    <div class="work-box" v-for="(item, id) in workData" :key="id">
      <div class="work-head">
        <!-- 头像 -->
        <div class="work-img">
          <img
            src="../../../imgs/切图/其他页/main-icon-touxiang-01.png"
            alt=""
          />
        </div>
        <!-- 个人信息 -->
        <div class="work-msg">
          <div class="msg-title">
            <h2>{{ item.name }}</h2>
            <span>{{ item.grade }}</span>
            <span>{{ sexobj[item.sex] }}：{{ item.age }}</span>
            <!-- <div class="state">{{ stateobj[item.state] }}</div> -->
            <div class="state state1" v-show="item.state == 1">
              {{ stateobj[item.state] }}
            </div>
            <div class="state state2" v-show="item.state == 2">
              {{ stateobj[item.state] }}
            </div>
            <div class="state state3" v-show="item.state == 3">
              {{ stateobj[item.state] }}
            </div>
          </div>
          <div>创建时间： {{ item.date }}</div>
          <p class="section">
            科室：{{ msg.section }} &nbsp;&nbsp;&nbsp; 医生：{{ item.doctor }}
          </p>
          <p>手机号码：{{ item.phone }}</p>
        </div>
      </div>
      <!-- 接诊   查看信息 -->
      <div class="work-btn">
        <span @click="tabState(item.id)" onselectstart="return false">
          接诊
        </span>
        <span onselectstart="return false" @click="open(item.id)">
          查看患者信息</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["workData"],
  data() {
    return {
      msg: {
        // name: "李进",
        // vip: "vip3",
        // sex: "男",
        // age: 25,
        // data: "2019-11-12",
        section: "全科",
        // doctor: "王阿",
        // phone: 18811111111,
        // state: "待接诊",
      },
      result: 0,
      sexobj: {
        1: "男",
        2: "女",
      },
      stateobj: {
        1: "待接诊",
        2: "接诊中",
        3: "已完成",
      },
      stateId: "",
    };
  },

  mounted() {},
  methods: {
    tabState(val) {
      this.stateId = val;
      this.$emit("parentState", this.stateId);
    },
    open(val) {
      this.stateId = val;
      this.$emit("parentalert", this.stateId);
    },
  },
};
</script>

<style lang="less" scoped>
.work-main {
  padding: 30px 20px;
  display: flex;
  flex-wrap: wrap;
}
.work-box {
  box-sizing: border-box;
  width: 362px;
  height: 240px;
  box-shadow: 0 0 20px -5px;
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 30px;
  margin-right: 45px;
}
.work-head {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;

  .work-img {
    margin-right: 30px;
    margin-bottom: 50px;
  }
  .work-msg {
    width: 220px;
    font-size: 14px;
    color: #868686;
    margin-top: 20px;
  }
  .msg-title {
    width: 220px;
    display: flex;
    justify-content: space-between;
    padding-bottom: 30px;
    h2 {
      font-weight: 700;
      color: #676767;
      display: inline-block;
    }
    :nth-child(2) {
      color: #7645f8;
      font-family: "微软雅黑";
    }
    :nth-child(4) {
      display: inline-block;
    }
    .state {
      width: 60px;
      height: 18px;
      color: #fff;
      // background-color: #ff6262;
      text-align: center;
      line-height: 18px;
      border-radius: 15px;
      vertical-align: top;
    }
  }
  .section {
    margin: 15px 0;
  }
}
.work-btn {
  height: 40px;
  span {
    box-sizing: border-box;
    border-top: 2px solid #bebebe;
    display: inline-block;
    width: 181px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    &:hover {
      color: #fff;
      background-color: #8a90ec;
    }
  }
  :nth-child(1) {
    color: #bcbff4;
    border-right: 2px solid #bebebe;
  }
}
.state1 {
  background-color: #ff6262;
}
.state2 {
  background-color: #2bcd92;
}
.state3 {
  background-color: #cbcbcb;
}
</style>